<template>
  <el-dialog :title="title" class="gl_dialog_TitleLine" :visible.sync="dialogVisible" :before-close="close" width="660px">
    <div class="gl_mb_15">
      <el-form ref="form" label-position="left" :rules="rules" style="width:60%" label-width="80px" :model="formData">
        <el-form-item prop="mobile" label="手机号">
          <el-input v-model="formData.mobile" placeholder="请输入手机号" size="mini" clearable />
        </el-form-item>
        <el-form-item prop="name" label="姓名">
          <el-input v-model="formData.name" placeholder="请输入姓名" size="mini" clearable />
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="mini" @click="close()">取 消</el-button>
      <el-button size="mini" type="primary" @click="addOrEdit()">保 存</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { mapState } from 'vuex';
import validator from '@/lib/validate/index.js';
import {
  api_POST_EventsManagementClerkOfCourseAddClerkOfCourseName, // 添加检录库人员的信息
  api_PUT_EventsManagementClerkOfCourseSetClerkOfCourseName // 修改检录库人员的信息
} from '@/extend/api/gameswaggerApi/app.js';
export default {
  name: 'FindUsers',
  props: {
    title: { // 弹窗标题
      type: String,
      default: ''
    },
    formData: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      dialogVisible: false,
      loading: false,
      organizationId: '',
      rules: {
        mobile: [
          validator.required('手机号不能为空'),
          {
            validator(rule, value, callback) {
              callback(validator.checkPhone(value, '手机号码格式错误'));
            },
            trigger: 'blur'
          }
        ],
        name: [
          validator.required('姓名不能为空')
        ]
      }
    };
  },
  computed: {
    ...mapState({
      currentUserType: state => state.user.currentUserType,
      DelegationId: state => state.user.rootDelegationId
    })
  },
  watch: {
    'currentUserType': {
      immediate: true,
      deep: true,
      handler(val) {
        if (val && val.organizationUnitId) {
          this.organizationId = val.organizationUnitId;
        }
      }
    }
  },
  methods: {
    // 打开弹窗
    open() {
      this.dialogVisible = true;
    },
    // 关闭弹窗
    close() {
      this.$refs['form'].resetFields();
      this.dialogVisible = false;
    },
    // 添加 or 编辑
    addOrEdit() {
      var that = this;
      that.$refs.form.validate((valid) => {
        if (valid) {
          that.loading = true;
          if (that.title === '添加检录人员') {
            that.formData.organizationId = that.organizationId || '';
            api_POST_EventsManagementClerkOfCourseAddClerkOfCourseName(that.formData).then(res => {
              that.loading = false;
              that.$refs['form'].resetFields();
              that.dialogVisible = false;
              that.$parent.getCheckPeople();
              that.$message({
                type: 'success',
                message: '添加成功!'
              });
            }).catch(() => {
              that.loading = false;
              that.$message({
                type: 'error',
                message: '添加失败'
              });
            });
          } else if (that.title === '编辑检录人员') {
            api_PUT_EventsManagementClerkOfCourseSetClerkOfCourseName(that.formData).then(res => {
              that.loading = false;
              that.$refs['form'].resetFields();
              that.dialogVisible = false;
              that.$parent.getCheckPeople();
              that.$message({
                type: 'success',
                message: '编辑成功!'
              });
            }).catch(() => {
              that.loading = false;
              that.$message({
                type: 'error',
                message: '编辑失败'
              });
            });
          }
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>

</style>
